import BScroll from '@better-scroll/core'

/*
  开启对 content 以及 content 子元素 DOM 改变的探测。当插件被使用后，当这些 DOM 元素发生变化时，将会触发 scroll 的 refresh 方法。 observe-dom 插件具有以下几个特性：
  针对改变频繁的 CSS 属性，增加 debounce
  如果改变发生在 scroll 动画过程中，则不会触发 refresh
*/
import ObserveDOM from '@better-scroll/observe-dom'
import { onMounted, onUnmounted, onActivated, onDeactivated, ref } from 'vue'

BScroll.use(ObserveDOM)
/**
 * @params wrapperRef(节点)、options(接收属性)、 emit(发送属性)
 */
export default function useScroll(wrapperRef, options, emit) {
  const scroll = ref(null)

  onMounted(() => {
    const scrollVal = (scroll.value = new BScroll(wrapperRef.value, {
      observeDOM: true,
      ...options
    }))
    // console.log('scrollVal', scrollVal)
    if (options.probeType > 0) {
      // pos 就是e
      scrollVal.on('scroll', (pos) => {
        // console.log('pos', pos)
        emit('scroll', pos)
      })
    }
  })

  onUnmounted(() => {
    scroll.value.destroy()
  })

  onActivated(() => {
    scroll.value.enable()
    scroll.value.refresh()
  })

  onDeactivated(() => {
    scroll.value.disable()
  })
  return scroll
}
